<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <meta charset="UTF-8">
  <title>法向材质</title>
</head>
<body onload="init()">
<script src="../three.min.js"></script>
<script>
  /* 参数
   -----------------------------------------------------------------

   new THREE.MeshNormalMaterial()

   法向材质的设定很简单，对于调试很有帮助， 甚至不用设置任何参数：

   -----------------------------------------------------------------
   */

  function init() {
    let renderer = new THREE.WebGLRenderer();
    renderer.setSize(400, 300);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor(0x000000)

    let scene = new THREE.Scene();

    let camera = new THREE.PerspectiveCamera(50, 400 / 300, 1, 10)
    camera.position.set(2, 3, 4);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add(camera);

    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(-5, 10, 5);
    scene.add(light);

    let cube = new THREE.Mesh(
        new THREE.CubeGeometry(2, 2, 2),
        new THREE.MeshNormalMaterial()
    );
    scene.add(cube);

    renderer.render(scene, camera);
  }
</script>
</body>
</html>